/*
 * @Author: wangtao
 * @Date: 2020-08-20 14:07:42
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-10 22:18:40
 * @Description: 司机端首页
 */

import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
  PixelRatio,
} from 'react-native';
import { Button, msg } from '@/common';
import {
  iconRightRed02,
  iconRightGray02,
  iconStartPointGreen,
  iconEndPointOrange,
} from '@/images';
import { TypeAssemble } from '@/components';
import {
  mainBgColorWhite,
  px2dp,
  fontColorCoffee,
  fontColorSecDeepGray,
  splitLineColorLightGray,
  fontColorRed,
} from '@/styles';
import api from '@/api';

const { Submit } = Button;

export default class WayOrderItem extends React.PureComponent {
  render() {
    const { detail } = this.props;
    const {
      loadingBeginTime,
      loadingEndTime,
      transportStatus,
      startAddress,
      endAddress,
      goodsName,
      packageName,
      weight,
      weightUnit,
    } = detail;
    return (
      <TouchableOpacity
        style={styles.itemWrap}
        activeOpacity={0.8}
        onPress={() => {
          this.handerClick(detail);
        }}
      >
        <View style={styles.itemTop}>
          <Text style={styles.itemTime}>
            {loadingBeginTime.substr(5, loadingBeginTime.length - 8)}
            -
            {loadingEndTime.substr(5, loadingEndTime.length - 8)}
            可装货
          </Text>
          <View style={styles.itemTopStatus}>
            {this._renderStatus(transportStatus)}
          </View>
        </View>
        <View style={styles.itemMiddle}>
          <View style={styles.pointWrap}>
            <Image
              source={iconStartPointGreen}
              resizeMode='contain'
              style={styles.pointImg}
            />
            <Text style={styles.pointTitle} numberOfLines={1}>
              {startAddress}
            </Text>
          </View>
          <View style={styles.pointWrap}>
            <View style={styles.pointImg} />
            <TypeAssemble
              lineData={[
                goodsName,
                packageName,
                weight + this.matchingUnit(weightUnit),
              ]}
            />
          </View>
          <View style={styles.pointWrap}>
            <Image
              source={iconEndPointOrange}
              resizeMode='contain'
              style={styles.pointImg}
            />
            <Text style={styles.pointTitle} numberOfLines={1}>
              {endAddress}
            </Text>
          </View>
        </View>
        <View style={styles.itemBottom}>
          {this.getOneMoreTime(detail)}
          {this.checkBtn(detail)}
        </View>
      </TouchableOpacity>
    );
  }

  _renderStatus = (transportStatus) => {
    switch (transportStatus) {
    case 1:
      return (
        <>
          <Text style={[styles.itemTopStatusText, { color: fontColorRed }]}>未完成</Text>
          <Image
            source={iconRightRed02}
            resizeMode='contain'
            style={styles.rightImg}
          />
        </>
      );
    case 2:
      return (
        <>
          <Text style={styles.itemTopStatusText}>已完成</Text>
          <Image
            source={iconRightGray02}
            resizeMode='contain'
            style={styles.rightImg}
          />
        </>
      );

    default:
      break;
    }
  };

  // 转义单位
  matchingUnit = (unit) => {
    const { unitList } = this.props;
    if (!unit || unitList.length === 0) {
      return '';
    }
    if (unitList.length > 0) {
      const unitName = unitList.filter((u) => u.code === unit);
      if (unitName.length > 0) {
        return unitName[0].name;
      }
      return unit;
    }
    return unit;
  };

  handerClick = (item) => {
    const { handerClick } = this.props;
    handerClick && handerClick(item);
  };

  toReceipt = (item) => {
    const { toReceipt } = this.props;
    toReceipt && toReceipt(item);
  };

  checkBtn(item) {
    if (item.transportStatus === 1) {
      if (item.loadingStatus === 1) {
        return (
          <Submit
            text='装货'
            onClick={() => {
              this.toReceipt(item);
            }}
            boxStyle={styles.btnStyle}
            btnTextStyle={{
              fontSize: px2dp(28),
              color: fontColorCoffee,
            }}
          />
        );
      }
      if (item.loadingStatus === 2) {
        return (
          <Submit
            text='卸货'
            onClick={() => {
              this.toReceipt(item);
            }}
            boxStyle={styles.btnStyle}
            btnTextStyle={{
              fontSize: px2dp(28),
              color: fontColorCoffee,
            }}
          />
        );
      }
    } else if (item.transportStatus === 2 && item.needReceipt === 1) {
      // status   运单状态 待运输 = 1, 运输中 = 2, 已送达 = 3, 已完成 = 4, 作废 = 5")
      if (item.status !== 4 && item.status !== 5) {
        return (
          <Submit
            text='修改回单'
            onClick={() => {
              this.toReceipt(item);
            }}
            boxStyle={styles.btnStyle}
            btnTextStyle={{
              fontSize: px2dp(28),
              color: fontColorCoffee,
            }}
          />
        );
      }
    }
  }

  getOneMoreTime = (item) => {
    if (item.transportStatus === 2 && item.orderType === 2) {
      return (
        <Submit
          text='再来一单'
          onClick={() => {
            this.driverNextWaybill(item);
          }}
          boxStyle={styles.oneMoreBtnStyle}
          btnTextStyle={{
            fontSize: px2dp(28),
            color: '#999796',
          }}
        />
      );
    }
  };

  driverNextWaybill = (item) => {
    api.supply.driverNextWaybill({ transportNo: item.transportNo }).then((res) => {
      if (res.success) {
        // 开始排队
        msg.emit('router: refreshRoute', {
          routeName: 'DriverTab',
        });
        msg.emit('router: goToNext', {
          routeName: 'DriverMain',
        });
      } else {
        msg.emit('app:tip', { text: res.msg ? res.msg : '网络错误' });
      }
    });
  };
}

const styles = StyleSheet.create({
  itemWrap: {
    borderRadius: px2dp(16),
    backgroundColor: mainBgColorWhite,
    width: px2dp(702),
    height: px2dp(415),
    marginTop: px2dp(24),
    paddingHorizontal: px2dp(24),
  },
  itemTop: {
    width: '100%',
    height: px2dp(88),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  itemMiddle: {
    width: '100%',
    flex: 1,
    borderTopWidth: 1 / PixelRatio.get(),
    borderTopColor: splitLineColorLightGray,
    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: splitLineColorLightGray,
    paddingTop: px2dp(24),
    paddingBottom: px2dp(30),
    justifyContent: 'space-between',
  },
  itemBottom: {
    width: '100%',
    height: px2dp(100),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  itemTopStatus: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  rightImg: {
    width: px2dp(24),
    height: px2dp(24),
  },
  pointImg: {
    width: px2dp(36),
    height: px2dp(36),
  },
  itemTime: {
    fontSize: px2dp(26),
    color: fontColorSecDeepGray,
  },
  itemTopStatusText: {
    fontSize: px2dp(26),
    color: fontColorSecDeepGray,
  },
  pointWrap: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  pointTitle: {
    marginLeft: px2dp(12),
    fontWeight: 'bold',
    fontSize: px2dp(32),
  },
  pointSubTitle: {
    marginLeft: px2dp(12),
    fontSize: px2dp(26),
    color: fontColorSecDeepGray,
  },
  pointSubTitleLine: {
    marginRight: px2dp(12),
  },
  btnStyle: {
    height: px2dp(56),
    backgroundColor: mainBgColorWhite,
    borderWidth: px2dp(1),
    borderColor: fontColorCoffee,
    borderRadius: px2dp(8),
    marginLeft: px2dp(24),
  },
  oneMoreBtnStyle: {
    height: px2dp(56),
    backgroundColor: mainBgColorWhite,
    borderWidth: px2dp(1),
    borderColor: '#CDCCC9',
    borderRadius: px2dp(8),
    marginLeft: px2dp(24),
  },
});
